<template>
	<div class="search_page_wrapper">
		<search-header>
			<el-upload ref="uploader" class="search_face_form" drag :action="uploadAction" :limit="1" :accept="imgAccept" :show-file-list="false"
				:before-upload="handleBeforeUpload" :on-success="handleUploadSuccess">
				<i class="el-icon-upload2"></i>
				<div class="el-upload__text">
					拖拽图片到此处 或
					<em>上传</em>
					图片(小于10M)
				</div>
				<div class="img-view" slot="tip" v-if="!!uploadImgSrc">
					<img :src="uploadImgSrc" />
					<i class="el-icon-remove-outline" @click="handleRemoveImage()"></i>
				</div>
			</el-upload>
		</search-header>
		<facelib-data v-if="isFirst" @look="handleLookDetail"></facelib-data>
		<div class="search_face_result" v-else-if="searchResult.length" v-loading="loading">
			<el-table :data="searchResult" style="width: 100%" height="100%">
				<el-table-column type="selection" width="42"></el-table-column>
				<el-table-column prop="date" label="文件预览" width="120">
					<template slot-scope="{ row }">
						<img class="image" :src="row.fields.attrAddr || uploadImgSrc" alt="" />
					</template>
				</el-table-column>
				<el-table-column prop="title" label="所属文件" width="180"></el-table-column>
				<el-table-column prop="address" label="所在位置" :formatter="libFormatter"></el-table-column>
				<el-table-column prop="createDate" label="上传时间" :formatter="createDateFormatter"></el-table-column>
				<el-table-column prop="creatorName" label="上传者"></el-table-column>
				<el-table-column label="操作" width="196">
					<template slot-scope="{ row }">
						<el-button type="text" icon="el-icon-view" @click="handleLookNode(row)">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<face-node v-model="nodeDrawer" :data="faceNode"></face-node>
		<face-drawer v-model="detailDrawer" :data="faceDetail"></face-drawer>
	</div>
</template>

<script>
import moment from 'moment';
import faceNode from './faceNode';
import facelibData from './facelib';
import searchHeader from '../header';
import faceDrawer from './faceDrawer';
import { getLibraryList } from '@/api/data/tbNetDiskDir';
export default {
	components: { searchHeader, facelibData, faceDrawer, faceNode },
	data() {
		return {
			isFirst: true,
			loading: false,
			libraryData: [],
			uploadAction: `${process.env.VUE_APP_SEARCHURL}v1/face/search/find`,
			imgAccept: '.jpg,.png,.gif,.jpeg,.bpm',
			uploadImgSrc: '',
			searchResult: [],
			faceDetail: {},
			detailDrawer: false,
			faceNode: {},
			nodeDrawer: false
		}
	},
	filters: {

	},
	mounted() {
		this.getLibraryData();
	},
	methods: {
		handleBeforeUpload(file) {
			if(file.size <= 10 * 1024 * 1024) {
				let fileReader = new FileReader();
				fileReader.readAsDataURL(file);
				fileReader.onload = () => {
					this.uploadImgSrc = fileReader.result;
				};
				this.loading = true;
				return true;
			} else {
				this.$message.warning('图片大小超过10MB，无法上传');
				return false;
			}
		},

		//上传成功
		handleUploadSuccess(result) {
			this.loading = false;
			this.isFirst = false;
			this.$refs['uploader'].clearFiles();
			if(result.status === 200) {
				this.searchResult = !result.data ? [] : result.data;
			}
		},

		handleRemoveImage() {
			this.uploadImgSrc = '';
			this.searchResult = [];
		},

		//获取库数据
		async getLibraryData() {
			let libArr = [{ id: '114b8d2a1bbb41c4bdeebaf25d02fc45', name: '公共资源库' }];
			let params = { page: 1, limit: 9999, libraryId: -1, type: '1' };
			let result = await getLibraryList(params).then((res) => res.data);
			if(result.code === '0') {
				let datas = !result.data ? [] : result.data;
				this.libraryData = [...libArr, ...datas];
			}
		},

		libFormatter(row) {
			let did = row.fields.dirId;
			let info = this.libraryData.find((item) => item.id === did);
			return !info ? '--' : info.name;
		},

		//时间格式化
		createDateFormatter(data) {
			return moment(data.createDate.time).format('YYYY-MM-DD HH:mm:ss');
		},

		//查看详情
		handleLookDetail(data) {
			this.detailDrawer = true;
			this.faceDetail = { ...data };
		},

		//查看节点
		handleLookNode(data) {
			this.nodeDrawer = true;
			this.faceNode = { ...data };
		}
	}
}
</script>

<style lang="scss" scoped>
.search_page_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: #fff;
}

.search_face_form::v-deep {
	position: relative;
	width: 720px;
	margin: 0 auto;

	.el-upload {
		display: block;
	}

	.el-upload-dragger {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 80px;
		line-height: 1;
	}

	.el-icon-upload2 {
		margin-right: 10px;
	}

	.img-view {
		position: absolute;
		top: 10px;
		left: 10px;
		width: 60px;
		height: 60px;

		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		i.el-icon-remove-outline {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: none;
			cursor: pointer;
			overflow: hidden;
			border-radius: 3px;
			background-color: rgba(0, 0, 0, 0.3);

			&::before {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #fff;
				font-size: 20px;
			}
		}

		&:hover i {
			display: block;
		}
	}
}

.search_face_result {
	flex: 1;
	padding: 0 16px;
	overflow: hidden;

	img.image {
		display: block;
		width: 48px;
		height: 48px;
		object-fit: contain;
	}
}
</style>